<template>
	<view class="container">
		<view class="content">
			<form @submit="onSubmit">
				<view class="content-title">手机号注册</view>
				<view class="content-item content-item-aspect">
					<input name="mobile" v-model="state.mobile" class="content-input" placeholder="请输入手机号" />
				</view>
				<view class="content-item">
					<input name="captchaCode" v-model="state.captchaCode" class="content-item-aspect content-input" placeholder="请输入图形验证码" />
					<image class="content-verifyCode" :src="state.captchaImage" @click="onCaptcha" />
				</view>
				<view class="content-item content-item-aspect">
					<input class="content-input" name="smsCode" v-model="state.smsCode" placeholder="请输入短信验证码" />
					<button class="content-code" @click="onSendCode" >
						<text class="main-color" v-if="timr.time == 0">{{timr.isUsed ? "重新获取" : "获取验证码"}}</text>
						<text v-else>{{timr.time}}S重新发送</text>
					</button>
				</view>
				<u-checkbox v-if="false" class="content-item content-agreement" v-model="state.agreement" shape="circle" active-color="#FF8A1F" size="36rpx" >
					<view>
						我已阅读<text class="main-color">用户协议</text>和<text class="main-color">隐私条款</text>
					</view>
				</u-checkbox>
				<button class="content-submit" form-type="submit">注册下载APP</button>
			</form>
		</view>
		<u-toast ref="toast" />
	</view>
</template>

<script setup>
	import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
	import store from '@/store'
	import * as CaptchaApi from '@/api/captcha'
	import { useTimer, useValidateForm, usePromise } from "@/hooks"
	
	const instance = getCurrentInstance()
	const timr = useTimer(60)
	const toast = ref(null)
	const state = reactive({
		mobile: "",
		smsCode: "",
		captchaKey: "",
		captchaCode: "",
		captchaImage: "",
		agreement: false
	})
	const promise = usePromise()
	const validateForm = useValidateForm([
		{
			name: "mobile",
			test: formData => {
				if(formData.mobile) {
					if(!/^1\d{10}$/.test(formData.mobile)) {
						return "手机号格式错误"
					}
				} else {
					return "请输入手机号"
				}
			}
		}, {
			name: "captchaCode",
			test: formData => {
				if(!formData.captchaCode) {
					return "请输入正确图形验证码"
				}
			}
		}, {
			name: "smsCode",
			test: formData => {
				if(!formData.smsCode) {
					return "请输入短信验证码"
				}
			}
		}
	], state)
	// 获取图形验证码
	const onCaptcha = () => {
		CaptchaApi.image().then(result => {
			state.captchaKey = result.data.key
			state.captchaImage = result.data.base64
		})
	}
	// 发送短信验证码
	const onSendCode = () => {
		const mobile = validateForm.check("mobile")
		const captchaCode = validateForm.check("captchaCode")
		if(mobile || captchaCode) {
			return toast.value.show({
				title: mobile || captchaCode,
				type: "warning",
				position: "bottom"
			})
		}
		timr.start(() => {
			CaptchaApi.sendSmsCaptcha({
			    form: {
					mobile: state.mobile,
					captchaKey: state.captchaKey,
					captchaCode: state.captchaCode,
			    }
			}).then(result => {
				instance.appContext.config.globalProperties.$toast(result.message)
			})
		})
	}
	// 提交表单
	const onSubmit = (event) => {
		// 验证字段
		const result = validateForm.validate(event.detail.value)
		if(result) {
			return toast.value.show({
				title: result.message,
				type: "warning",
				position: "bottom"
			})
		} else {
			promise.fallback(() => store.dispatch('Login', {
			    mobile: state.mobile,
				smsCode: state.smsCode,
			    isParty: false,
				partyData: {},
			    refereeId: store.getters.refereeId
			}).then(result => {
				window.location.href = result.data.app_url
			}).catch(error => {
				instance.appContext.config.globalProperties.$toast(error.message)
			}))
		}
	}
	onMounted(() => {
		onCaptcha()
	})
</script>

<style lang="scss" scoped>
	.container {
		padding: 388rpx 20rpx var(--window-bottom);
		background: url("../../static/imgs/login/bg1.png") top left no-repeat;
		background-size: 100% auto;
	}
	.main-color {
		color: #FF8A1F;
	}
	.content {
		padding: 64rpx 48rpx;
		border-radius: 32rpx 32rpx 0 0;
		background-color: #ffffff;
		&-title {
			font-family: HarmonyOS Sans SC;
			font-size: 40rpx;
			font-weight: bold;
			line-height: 40rpx;
			font-variation-settings: "opsz" auto;
			color: #3D3D3D;
		}
		&-item {
			display: flex;
			margin-top: 48rpx;
			&-aspect {
				background: #F2F7F8;
				border-radius: 16rpx;
			}
		}
		&-input {
			height: 100rpx;
			flex: 1;
			padding: 16rpx 32rpx;
			font-size: 28rpx;
			box-sizing: border-box;
		}
		&-verifyCode {
			margin-left: 18rpx;
			width: 200rpx;
			height: 100rpx;
			border-radius: 16rpx;
			// background-color: #FF8A1F;
		}
		&-code {
			margin: 8rpx;
			width: 220rpx;
			border-radius: 16rpx;
			font-size: 28rpx;
			line-height: 88rpx;
			font-weight: normal;
			text-align: center;
			color: #AAAAAA;
			background: #FFFFFF;
		}
		&-agreement {
			display: flex;
			align-items: center;
			font-family: HarmonyOS Sans SC;
			font-size: 28rpx;
			font-weight: normal;
			line-height: 28rpx;
			color: #AAAAAA;
		}
		&-submit {
			margin-top: 120rpx;
			height: 100rpx;
			border-radius: 16rpx;
			background: #FF8A1F;
			font-family: HarmonyOS Sans SC;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>